import React, { useState } from 'react'
import { Card, Col, Row } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';

const { Meta } = Card;

const Demo = () => {
    const [dataSource, setDataSource] = useState([
        { id: 1, name: "Shrek" },
        { id: 2, name: "Fiona" },
        { id: 3, name: "Nike" },
        { id: 4, name: "Tommy" },
        { id: 5, name: "JackTony" },
        { id: 6, name: "KFC" },
        { id: 7, name: "BMW" },
        { id: 8, name: "London" },
    ])

  return (
    <>
        <PageContainer>
            <Row gutter={[24, 24]}>
                {dataSource.map(item => (
                    <Col span={6}>
                        <Card
                            hoverable
                            style={{ width: 240 }}
                            cover={<img alt="example" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*abGUQKUocSMAAAAAAAAAAABkARQnAQ" />}
                        >
                            <Meta title={item.name} description="www.instagram.com" />
                        </Card>
                    </Col>                
                    ))
                }
            </Row>
        </PageContainer>
    </>
   )
}


export default Demo